<template>
  <div class="top" :style="{background:bgColor}">
        <div class="left">
              <slot name="left"></slot>
        </div>
        <div class="center">
              <slot name="center"></slot>
        </div>
        <div class="right">
              <slot name="right"></slot>
        </div>
  </div>
</template>

<script>
export default {
      name:'top',
      props:{
            bgColor:{
                  type:String,
                  default:'red',
            }
      }

}
</script>

<style lang="scss" scoped>
      .top{
            width: 100%;
            height: 50px;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            .left{
                  width: 60px;
            }
            .center{
                  flex: 1;
            }
            .right{
                  width: 60px;
            }
      }
</style>